<template>
  <!-- 销售订单页面 -->
  <div class="sales-order">
    <!-- 查询条件 -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="订单状态">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择..."
                   style="width: 100px"
                   @keyup.enter="handleQuery"
                   class="!w-180px">
          <el-option label="全部" value=""/>
          <el-option label="已下单" value="已下单"/>
          <el-option label="已发货" value="已发货"/>
          <el-option label="已完成" value="已完成"/>
        </el-select>
      </el-form-item>
      <el-form-item label="出货日期">
        <el-date-picker
          v-model="queryParams.shipDateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="handleQuery"
                   class="!w-180px">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border stripe>
      <el-table-column prop="orderNumber" label="销售订单编号" />
      <el-table-column prop="orderId" label="销售订单ID" />
      <el-table-column prop="companyName" label="公司名称" />
      <el-table-column prop="shipDate" label="出货日期" />
      <el-table-column prop="currency" label="币种" />
      <el-table-column prop="receivedAmount" label="已收款金额" />
      <el-table-column prop="receivedRatio" label="已收款比例" />
      <el-table-column prop="orderAmount" label="订单金额" />
      <el-table-column prop="cargoValue" label="货值" />
      <el-table-column prop="orderStatus" label="订单状态" />
      <el-table-column prop="businessPerson" label="业务员" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNo"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// 假设存在相应的API接口用于获取销售订单数据
// import { SalesOrderApi } from '@/api/customermanager/custfollow'

interface SalesOrder {
  orderNumber: string
  orderId: string
  companyName: string
  shipDate: string
  currency: string
  receivedAmount: number
  receivedRatio: string
  orderAmount: number
  cargoValue: number
  orderStatus: string
  businessPerson: string
}

const tableData = ref<SalesOrder[]>([])
const loading = ref(false)
const total = ref(0)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  orderStatus: '',
  shipDateRange: [] as Date[]
})

// 获取销售订单数据
const getSalesOrderData = async () => {
  try {
    loading.value = true
    // 模拟API调用，实际使用时请替换为真实的API
    /*
    const params = {
      pageNo: queryParams.pageNo,
      pageSize: queryParams.pageSize,
      orderStatus: queryParams.orderStatus,
      beginShipDate: queryParams.shipDateRange[0] ? formatDate(queryParams.shipDateRange[0]) : undefined,
      endShipDate: queryParams.shipDateRange[1] ? formatDate(queryParams.shipDateRange[1]) : undefined
    }

    const res = await SalesOrderApi.getSalesOrderPage(params)
    tableData.value = res.list
    total.value = res.total
    */

    // 模拟数据
    tableData.value = [
      {
        orderNumber: 'SO2023001',
        orderId: '1',
        companyName: 'ABC公司',
        shipDate: '2023-05-15',
        currency: 'USD',
        receivedAmount: 5000,
        receivedRatio: '50%',
        orderAmount: 10000,
        cargoValue: 9500,
        orderStatus: '已发货',
        businessPerson: '张三'
      },
      {
        orderNumber: 'SO2023002',
        orderId: '2',
        companyName: 'XYZ公司',
        shipDate: '2023-05-20',
        currency: 'CNY',
        receivedAmount: 8000,
        receivedRatio: '80%',
        orderAmount: 10000,
        cargoValue: 9200,
        orderStatus: '已完成',
        businessPerson: '李四'
      }
    ]
    total.value = 2
  } catch (err) {
    ElMessage.error('获取销售订单数据失败')
    console.error(err)
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (date: Date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getSalesOrderData()
}

const resetQuery = () => {
  // 重置查询参数
  queryParams.orderStatus = ''
  queryParams.shipDateRange = []
  queryParams.pageNo = 1
  getSalesOrderData()
}

const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  queryParams.pageNo = 1
  getSalesOrderData()
}

const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  getSalesOrderData()
}

// 组件挂载时获取数据
onMounted(() => {
  getSalesOrderData()
})
</script>

<style scoped>
.sales-order {
  padding: 20px;
}
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px; /* 与表格的间距 */
}
</style>
